<?php
session_start();
if(! isset($_SESSION['username'])) {
    header('Location:index.html');
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星月</title>
   <link rel="stylesheet" href="./font/iconfont.css">
<script src="./font/iconfont.js"></script>
 <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
   <script src="jquery-3.5.1.min.js" type="text/javascript"></script>
    <link href="select2.min.css" rel="stylesheet">
    <script src="select2.min.js" type="text/javascript"></script>
  

<?php include ('menu.php');
//1. 链接数据库
header("content-type:text/html;charset=utf8");
include('conn.php');
$id=$_GET['id'];
//2.执行sql
$sql_select = "select * from stu where id='$id'";
$stmt = mysqli_query($conn,$sql_select);
//    var_dump($stmt);
//    die();
$stu = mysqli_fetch_assoc($stmt); // 解析数据
?>

      
      
      
    <style>


.icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 20px;
            
          
            
}

        .div{
            position: relative;
            text-align: center;
            padding-left: 500px;
        }
        .font{
            font-size: 16px;
            font-weight: bold;;
        }
        form{
	font-weight: bold;
	font-size: 18px;
        }
body {
	background-color: #F2F2F2;
}
 #msg{
    height: 2rem;
    text-align: center;
    position: fixed;
    top: 50%;
    margin-top: -1rem;
    line-height: 2rem;
    width: 100%;
}
#msg span{
    color: #fff;
    background: #f05f55;
    height: 2rem;
    display: inline-block;
    padding: 0 3rem;
    border-radius: 52px;
}
#s5:disabled {
  background: rgba(0, 225, 255, 0.5);
}
 #s5 {
  width: 100px;
  outline: none;
  border: none;
  background: rgb(0, 132, 255);
  height: 30px;
  cursor: pointer;
  color: #fff;
  border-radius: 20px;
  font: bold 14px '宋体';
  transition: all 0.5s;
visibility: hidden;
}
input {
  font-size: inherit;
}
.btn {
  margin-left:-20px;
  

 
    
}
background: repeating-linear-gradient(
            -45deg,
            #e8544d,
            #e8544d 1px,
            #fff 2px,
            #fff 2px,
            #75adf8 2px,
            #75adf8 3px,
            #fff 3px,
            #fff 4px
        );
     
       
      
        
/*        
            background: url(./663.png)no-repeat; */
        }
        marquee {
            background-color: #fff;
        }
.flex {
  display:flex;
  justify-content:center;
  align-items:center;
margin-bottom: 16px;
 }
 .demo {
  width:100%;
  height:22.85px;
  position:relative;
  /* background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8); */
  color:#000;
  opacity: 0.6;
  font-size:13px;
 }
 .circle {
  width:100px;
  height:100px;
  border-radius:50%;
  position:relative;
  background:linear-gradient(90deg,#feac5e,#c779d0,#4bc0c8);
  color:#fff;
 }
 .circle:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  margin:-6px;
  border:5px solid transparent;
  border-top:5px solid #f64f59;
  border-radius:50%;
  transform:rotate(45deg);
  animation:circleRotate 3s linear infinite;
 }
 @keyframes circleRotate {
  0% {
   transform:rotate(0);
  }
  100% {
   transform:rotate(360deg);
  }
 }

    </style>
<script>
        function alert(e){
            $("body").append("<div id='msg'><span>"+e+"</span></div>");
            clearmsg();
        }
        function clearmsg(){
            var t = setTimeout(function(){
                $("#msg").remove();
            },2000)
        };
        
       </script>
</head>
<body>
<div style="text-align: center">

<div class="demo flex"><marquee behavior="" 
direction="">日期信息填写格式正确后才能提交，管理员通过后可在主页查看</marquee></div>
 
 <script type="text/javascript">
 /* 
功能:为矩形元素附上一层运动的边线
原理:  核心:css clip rect   web animation 负责动态化
注意:请使用较高版本现代浏览器打开  本代码 使用了es6语法 且并未对css各浏览器前缀做处理
    如需兼容低版本浏览器   请自行加 web animate polyfill 及 使用babel转译
*/
 
 
/* 使用
_initDanceBorder(el,option);
*/
 
//纯 JS实现动态边框效果
//根据 http://www.jq22.com/jquery-info3297 bee木头 作者 核心思路(css clip rect) 创作
//传入依赖元素 自动生成动态边框
 
/* 
测试用配置
*/
const options = [{}, {
 duration: 12000,
 double: false
}, {
 duration: 4000,
 'border-color': 'red',
 'easing': 'ease-in-out'
}, {
 'margin': -15,
 'borderWidth': 10,
 'border-image': "url(./wx.png) 10 10",
 
}, {
 'borderWidth': 2
}]
 
 
//使用方法
for (let i = 0; i < document.getElementsByClassName('demo').length; i++) {
 _initDanceBorder(document.getElementsByClassName('demo')[i], options[i]);
}
 
/***************************      主 体 代 码       ********************************/
 
//传入dom元素与 配置即可
function _initDanceBorder(el, options = {}) {
    //默认设置  尺寸单位均为px
    let _options = {
        //边框模糊度  
        blur: 1,
        //距依赖元素距离 
        margin: -5,
        //边框宽度  
        borderWidth: 4,
        //转一周时长  
        duration: 8000,
        //运动效果  default:匀速
        easing: 'linear',
        //是否两条运动线  默认两条
        double: true,
        //渐变色边框 优先级高  若使用渐变色或图片背景  请正确传入该值  否则边框不会显示
        'border-image': 'linear-gradient(to bottom right, #12c2e9,#c471ed,#f64f59) 10 10',
        //边框色   border-image 优先级低
        'border-color': 'green'
    }
 
    //存在正常色 不存在渐变色   渐变色赋值为空
    options['border-color'] && !options['border-image'] && (_options['border-image'] = 'none')
    //设置拷贝
    Object.keys(_options).forEach(key => {
     options[key] && (_options[key] = options[key]);
        //double 的特殊判断
        if (key == 'double' && typeof options[key] == 'boolean') {
         _options[key] = options[key]
        }
    })
 
    //元素基本属性
    const styleObj = {
     'content': '',
     'z-index': -1,
     'margin': `${_options.margin}px`,
     'border': `${_options.borderWidth}px solid`,
     'border-color': _options['border-color'],
     'border-image': _options['border-image'],
     'filter': `blur(${_options.blur}px)`,
     'position': 'absolute',
     'top': 0,
     'bottom': 0,
     'left': 0,
     'right': 0
    }
 
    const pW = el.style.width || el.offsetWidth;
    const pH = el.style.height || el.offsetHeight;
 
    const fullWidth = pW + _options.margin * -2;
    const fullHeight = pH + _options.margin * -2;
 
    //四边切割数组
    const rectArray = [
    `rect(${-_options.blur}px, ${fullWidth}px, ${-_options.margin}px, ${-_options.blur}px)`,
    `rect(0px, ${-_options.margin}px, ${fullHeight + _options.blur}px, ${-_options.blur}px)`,
    `rect(${pH}px, ${fullWidth + _options.blur}px, ${fullHeight + _options.blur}px, 0px)`,
    `rect(${-_options.blur}px, ${fullWidth + _options.blur}px, ${fullHeight}px, ${pW + _options.blur}px)`
    ]
 
    const clipAnimate = [{
     clip: rectArray[0]
    },
    {
     clip: rectArray[1],
     offset: 0.25
    },
    {
     clip: rectArray[2],
     offset: 0.5
    },
    {
     clip: rectArray[3],
     offset: 0.75
    },
    {
     clip: rectArray[0],
     offset: 1
    }
    ];
 
    //由于border的可见特性使delay无效  第二条延迟一半的边动画   从0.5开始  
    const clipAnimateTwo = [{
     clip: rectArray[2]
    },
    {
     clip: rectArray[3],
     offset: 0.25
    },
    {
     clip: rectArray[0],
     offset: 0.5
    },
    {
     clip: rectArray[1],
     offset: 0.75
    },
    {
     clip: rectArray[2],
     offset: 1
    }
    ];
 
    const animateOption = {
     duration: _options.duration,
     iterations: Infinity,
     easing: _options.easing
    };
 
    const section = initBaseEl();
 
    //Web Animations  实现keyframes动画
    section.animate(clipAnimate, animateOption);
 
    //是否两条运动线
    if (_options.double) {
     let sectionTwo = initBaseEl();
     sectionTwo.animate(clipAnimateTwo, animateOption);
    }
 
    //构造元素
    function initBaseEl() {
     const section = document.createElement("section");
        //style属性赋值
        Object.keys(styleObj).forEach(key => {
         section.style[key] = styleObj[key]
        })
 
        el.appendChild(section);
 
        return section;
    }
 
 
    //页面尺寸改变  修改
}
</script>
<form    method="post" class="form-inline">
    <div class="form-group">
       
 


<input class="form-control"     name="shen" 
type="text"  style="display:none" value="待审核"> 
 

    <input class="form-control"     name="nicheng" 
type="text"  style="display:none" value="<?php echo $_SESSION['nicheng'];?>">
 
<input class="form-control"   style="display:none"   name="username" 
type="text"     value="<?php echo $_SESSION['username'];?>"> 

<br>
 
  
        <script>

 
   $(document).ready(function() {
    $('.form-control').select2();
   })

 
        </script>
<br>
       <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-kaishiriqi"></use>
    </svg>  <span class="font" > 请选择开始时间： 
      <input class="form-control" onchange="
check()"   name="qing" type="date" id="s2" ></span>
    
    
<br>
<br>
     <span class="font"> 请选择截止时间： </span>
 <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-jiezhiriqi"></use>
    </svg>  <input class="form-control"     onchange="
check()"  name="jie"     type="date" id="s3" >
    
<br>
<input name="fq"type="text"  style="display:none" value="<?php echo 
$time = date('Y-m-d h:i:s', time());?>">
<input class="form-control" name="ts"    
    id="s4" onchange="
check()"  type="text"    style="display:none"  >
   <br><br>
         <!-- <a href="main.php" class="btn btn-success">返回</a>-->
          <button type="submit" id='s5' 
class="btn btn-primary" ><svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tijiao"></use>
    </svg> 提交</button>
          <!--<input type="reset" value="重置" class="btn btn-warning">-->
          
        </p>
    
<br>
<script>

         layui.use(['layer','laydate'],function(){
    var $=layui.jquery,
    layer=layui.layer,laydate=layui.laydate;
    var start={
            min:'1970-01-01 00:00:00'
            ,max:'2099-12-31 23:59:59'
            ,istoday:false
            ,choose:function(dates){
                end.min=dates;
                end.start=dates;
            }
    }
    var end={
        min:laydate.now()
        ,max:'2099-12-31 23:59:59'
        ,istoday:true
        ,choose:function(dates){
            start.max=dates;
        }
}
document.getElementById('s2').onclick=function(){
    start.elem=this;
    laydate(start);
}
document.getElementById('s3').onclick=function(){//调用laydate选择时间
    end.elem=this;
    laydate(end);
}   
});
    function check(){

var start=document.getElementById("s2").value;//获取起始日期
var end=document.getElementById("s3").value;//获取结束日期
if(start==""){
     s5.style.visibility='hidden';
    
}
else if(end==""){
    s5.style.visibility='hidden';
  s5.disabled=true
}
else if(end<=start){
 s5.disabled=true
 s5.style.visibility='hidden';
    alert("选择日期不符合逻辑！请重新选择！");

 
}else{
 s5.disabled=false
 s5.style.visibility='visible';
}

 

document.getElementById("s4").value=getDays(start, end)}
function getDays(startDate,endDate){
var date1Str = startDate.split("-");//将日期字符串分隔为数组，数组元素分别为年、月、日      
//根据年、月、日的值创建Date对象
var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]);
var date2Str = endDate.split("-");
var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]);
var t1 = date1Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
var t2 = date2Obj.getTime();//返回从1970-1-1开始计算到Date对象中的时间之间的毫秒数
var datetime=1000*60*60*24; //一天时间的毫秒值 
var minusDays = Math.floor(((t2-t1)/datetime));//计算出两个日期天数差 
var days = Math.abs(minusDays);//如果结果为负数，取绝对值
 return days
    }
    



     
    </script>
       
     
         
    </div>
</form>
<script>




function ss(){
s6.addEventListener('input',function(){
if(s2.value.trim() === ''){
 s5.disabled=true
 s5.style.visibility='hidden';
 return false
}else if(s3.value.trim() === ''){
 s5.disabled=true
 s5.style.visibility='hidden';
 return false
    }else if(s4.value === ''){
 // s5.disabled=true
 s5.style.visibility='hidden';
 return false

}else{
  s5.disabled=false
 s5.style.visibility='visible';
 return true
}
})
check()
}
ss()


s6.onchange = function(){
s4.addEventListener('click',function(){
if(s4.value === ''){
 s5.disabled=true
 s5.style.visibility='hidden';
return false
}else{
  s5.style.visibility='visible';
 s5.disabled=false
 return true
}
})
check()
 ss()
}

 





</script>

</div>
</body>
</html>
<?php
if($_SERVER["REQUEST_METHOD"]=="POST") {
include('conn.php');
    $nicheng = $_POST['nicheng'];
    $ts = $_POST['ts'];
    $qing = $_POST['qing'];
    $jie = $_POST['jie'];
     $username= $_POST['username'];
     $shen=$_POST['shen'];
       $fq=$_POST['fq'];
 $sql = "select * from stu where nicheng = '{$_POST['nicheng']}' and qing='{$_POST['qing']}' and jie='{$_POST['jie']}' ";
          
          $rs = mysqli_query($link, $sql); //执行sql查询
          $row = mysqli_fetch_assoc($rs);
       
          if ($row) { // 用户存在；
              if ($_POST['nicheng'] == $row['nicheng'] && $_POST['qing'] == $row['qing'] && $_POST['jie'] == $row['jie']) {
        
                        
                         echo  "<script>alert('请勿重复提交！');</script>";
              }
              }else{

             
    $sql = "insert into stu (nicheng, ts, qing, jie,username,shen,fq) values ('$nicheng', '$ts','$qing','$jie','$username','$shen','$fq')";
    $rw = mysqli_query($conn, $sql);
    if ($rw ) {
          echo "<script>alert('已提交！请等待管理员通过');window.open('main.php')</script>";
    } else {
        echo "<script>alert('提交失败');window.open('main.php')</script>";
    }
 header("refresh:0.5;url=main.php");
}
}

?>
